<template>
  <div class="submit-wrapper">
    <button
      class="btn" type="primary" hover-class="btn-active"
      :disabled="disabled" @click="handleClick"
    >
      提交
    </button>
  </div>
</template>

<script>
export default {
  name: 'ZeSubmit',
  props: {
    disabled: { type: Boolean, default: false },
  },
  methods: {
    handleClick() {
      this.$emit('submit')
    },
  },
}
</script>

<style lang="scss" scoped>
.submit-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding-top: 10px;
  // z-index: 999;
  // padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
  padding-bottom: 4%;

  .btn {
    width: 280px;
    height: 36px;
    border-radius: 19px;
    border: none;
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      border: none;
    }

    &[aria-disabled="true"] {
      background-color: #CCCCCC;
    }
    &[aria-disabled="false"] {
      background: linear-gradient(180deg, #739ECA 0%, #ABCDE7 100%);
      &.btn-active {
        background: linear-gradient(180deg, #4d91d4 0%, #9fc8e7 100%);
      }
    }
  }
}
</style>
